export const isStyle = (mapContext, OPT = null, width, height) => {
    return new Promise((resolve, reject) => {
        if (OPT === null) resolve()
        // 绘制图例和标题
        const _this = OPT
        // 标题显示和隐藏
        if (_this.titleCont !== '') {
            mapContext.fillStyle = OPT.titleColor
            // mapContext.font = 'bold 150px FangSong'
            mapContext.font = 'bold 150px FangSong' // a4
            // mapContext.font = 'bold 294px FangSong' // a3
            // mapContext.font = 'bold 412px FangSong' // a2
            // mapContext.font = 'bold 577px FangSong' // a1
            // mapContext.font = 'bold 808px FangSong' // a1
            mapContext.textBaseline = 'top '
            if (_this.headlinePos === '左侧') {
                mapContext.textAlign = 'left'
                if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, 100, 150)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, 100, 210)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, 100, 294)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, 100, 412)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, 100, 577)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, 100, 808)
                else mapContext.fillText(_this.titleCont, 100, 350)
            } else if (_this.headlinePos === '右侧') {
                mapContext.textAlign = 'right'
                if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, width + 100, 150)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, width + 100, 210)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, width + 100, 294)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, width + 100, 412)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, width + 100, 577)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, width + 100, 808)
                else mapContext.fillText(_this.titleCont, width + 200, 350)
            } else {
                mapContext.textAlign = 'center'
                if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, (width + 100) / 2, 150)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, (width + 100) / 2, 210)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, (width + 100) / 2, 294)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, (width + 100) / 2, 412)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, (width + 100) / 2, 577)
                // if (_this.ioTitle === '外标题') mapContext.fillText(_this.titleCont, (width + 100) / 2, 808)
                else mapContext.fillText(_this.titleCont, (width + 100) / 2, 350)
            }
        }
        // 边框
        mapContext.rect(100, 200, width, height)
        // mapContext.rect(100, 280, width, height)
        // mapContext.rect(100, 392, width, height)
        // mapContext.rect(100, 549, width, height)
        // mapContext.rect(100, 769, width, height)
        // mapContext.rect(100, 1077, width, height)
        mapContext.strokeStyle = '#2B2B2B'
        mapContext.lineWidth = 10
        mapContext.strokeRect(100, 200, width, height)
        // mapContext.strokeRect(100, 280, width, height)
        // mapContext.strokeRect(100, 392, width, height)
        // mapContext.strokeRect(100, 549, width, height)
        // mapContext.strokeRect(100, 769, width, height)
        // mapContext.strokeRect(100, 1077, width, height)
        // 双边框
        if (_this.doubleBorder) {
            mapContext.rect(70, 170, width + 60, height + 60)
            mapContext.strokeStyle = '#000'
            mapContext.lineWidth = 20
            mapContext.strokeRect(70, 170, width + 60, height + 60)
        }
        // 图例
        if (_this.tuli !== 'data:,') {
            const img2 = new Image()
            img2.src = _this.tuli
            img2.width = width / 4.8
            img2.height = height / 5.6
            img2.onload = () => {
                switch (_this.tlPos) {
                    case '左下':
                        mapContext.drawImage(img2, 105, height + 195 - img2.height, img2.width, img2.height)
                        break
                    case '左上':
                        mapContext.drawImage(img2, 105, 205, img2.width, img2.height)
                        break
                    case '右上':
                        mapContext.drawImage(img2, width + 95 - img2.width, 205, img2.width, img2.height)
                        break
                    case '右下':
                        mapContext.drawImage(img2, width + 95 - img2.width, height + 195 - img2.height, img2.width, img2.height)
                        break
                }
                // resolve()
                if (_this.compassPos !== '' && _this.compass !== 'data:,') {
                    const img3 = new Image()
                    img3.src = _this.compass
                    img3.height = height / 8.5
                    img3.width = width / 14
                    img3.onload = () => {
                        // img3.src = '../assets/imgs/navigation.png'
                        switch (_this.compassPos) {
                            case '左下':
                                mapContext.drawImage(img3, 105, height + 195 - img3.height, img3.width, img3.height)
                                break
                            case '左上':
                                mapContext.drawImage(img3, 105, 205, img3.width, img3.height)
                                break
                            case '右上':
                                mapContext.drawImage(img3, width + 95 - img3.width, 205, img3.width, img3.height)
                                break
                            case '右下':
                                mapContext.drawImage(img3, width + 95 - img3.width, height + 195 - img3.height, img3.width, img3.height)
                                break
                        }
                        resolve()
                    }
                } else resolve()
            }
        } else resolve()
    })
}
